// 列表块
<template>

<div class="list-block">
    
    <h1 class="title">
        {{title}}
    </h1>

    <div class="content" :style='ste'>

        <ul>
            <li v-for='(mod, index) of mods' :key='index'>

                <h4 class="label">
                    {{mod.label}}
                </h4>

                <span class="val">
                    {{data[mod.key]}}
                </span>
                
            </li>
        </ul>
        
    </div>
    
</div>

</template>

<script lang='ts'>
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'

@Component({
   
})
export default class listBlock extends Vue{
    name:string = 'list-block'

    @Prop()
    title:string

    @Prop()
    data

    @Prop()
    mods

    @Prop()
    ste

   
}


</script>

<style scoped lang='scss'>

.list-block{

    .title{
        font-size: $font-small;
        margin-bottom: _intervals();
    }

    .content{
        padding: _rem(4px) _intervals();
        border-radius: $border_radius;
        background: $main_color;
        color: $font_light_color;
    }


    .label{
        font-weight: 400;
    }

    li{
        $h: _rem(30px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        height: $h;
        line-height: $h;
    }
    
}

</style>